<template>
	<view class="container">
		<image src="../../static/bg1.png" class="" style="width: 100%; height: auto; display: block;" mode="widthFix">
		</image>
		<view class="wap-content">
			<view class="wap-content-item">
				<view class="question" v-for="(question, index) in questions" :key="index">
					<view class="question-title">{{ index + 1 }}. {{ question.survey_content }}</view>
					<view v-if="question.survey_type === 1">
						<view v-for="(option, optionIndex) in question.options" :key="optionIndex"
							@click="handleButtonClick(index, optionIndex)"
							:class="['option-button', selectedOptionIndex[index] === optionIndex ? 'selected' : '']">
							{{ option }}
							<text v-if="selectedOptionIndex[index] === optionIndex" class="checkmark">&#x2713;</text>
						</view>
					</view>
					<view v-else-if="question.survey_type === 3">
						<uni-rate v-model="question.rateValue[index]" @change="handleRateChange" :max="5" />
					</view>
					<view v-else>
						<textarea v-model="question.suggestions" placeholder="请输入您的建议" style="width: 90%;"></textarea>
					</view>
				</view>
				<button class="submit-button"
					style="color:#ffffff;backgroundColor:#1e90f7;borderColor:#1e90f7;border-radius: 20px;"
					type="primary" @click="submitSurvey">立即提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSurveyTemplate,
		postSurvey
	} from "@/api/api";
	export default {
		data() {
			return {
				questions: [{
						survey_content: '您对本次就诊过程中的医疗服务评价如何？',
						type: 'singleChoice',
						options: ['A、非常满意', 'B、满意', 'C、一般', 'D、不满意'],
						selected: 0
					},
					{
						survey_content: '你对本次就诊过程中的服务质量评价如何？',
						type: 'rating'
					},
					{
						survey_content: '这些是对医院提出的改进建议？',
						type: 'suggestion',
						suggestions: ''
					}
				],
				selectedOptionIndex: [],
				rateValue: 0,
				suggestions: '',
				id: '',
				template: ''
			};
		},
		created() {
			// 添加两个随机的题目
			// this.addRandomQuestions(2);
			this.id = this.$route.query.return_code ? this.$route.query.return_code : "";
			console.log(this.id)
			if (this.id) {
				// this.doGetSurveyTemplate()
			}

		},
		methods: {
			doGetSurveyTemplate() {
				const idData = {
					return_code: this.id,
				};
				getSurveyTemplate(idData)
					.then(res => {
						console.log('登录2' + JSON.stringify(res));
						// 在这里处理获取到的结果
						this.questions = res.data
						this.template = res.data[0].template
						this.questions.forEach(question => {
							question.rateValue = [];
							question.options = ['A、非常满意', 'B、满意', 'C、一般', 'D、不满意']
						});

					})
					.catch(error => {
						console.error('请求出错：', error);
						// 在这里处理错误情况
					});
			},
			doPostSurvey() {

			},

			handleButtonClick(questionIndex, optionIndex) {
				// 更新所选选项的索引
				this.$set(this.selectedOptionIndex, questionIndex, optionIndex);
			},

			handleRateChange(value) {
				// Handle star rating selection
				console.log('Selected star rating:', value);
			},


			submitSurvey() {
				// 初始化一个空数组，用于存储所有问题的答案
				let answers = [];

				// 遍历 questions 数组，获取每个问题的答案
				this.questions.forEach((question, index) => {
					let answer = {};

					// 判断题目类型
					if (question.survey_type === 1) {
						// 单选题类型，获取用户选择的选项索引
						let selectedOptionIndex = this.selectedOptionIndex[index];

						// 判断用户是否选择了选项
						if (selectedOptionIndex !== undefined && selectedOptionIndex !== null) {
							// 获取选项内容
							let selectedOption = question.options[selectedOptionIndex];

							// 将选项内容添加到答案对象中
							answer = {
								id: question.id,
								survey_id: question.survey_id,
								survey_type: question.survey_type,
								survey_name: question.survey_name,
								value: selectedOption
							};
						}
					} else if (question.survey_type === 3) {
						// 评分题类型，获取用户评分值
						let rateValue = question.rateValue[index];

						// 判断用户是否进行了评分
						if (rateValue !== undefined && rateValue !== null) {
							// 将评分值添加到答案对象中
							answer = {
								id: question.id,
								survey_id: question.survey_id,
								survey_name: question.survey_name,
								survey_type: question.survey_type,
								value: rateValue
							};
						}
					} else {
						// 其他类型题目（如文本题），获取用户输入的建议
						let suggestions = question.suggestions;

						// 判断用户是否输入了建议
						if (suggestions) {
							// 将建议内容添加到答案对象中
							answer = {
								id: question.id,
								survey_id: question.survey_id,
								survey_name: question.survey_name,
								survey_type: question.survey_type,
								value: suggestions
							};
						}
					}

					// 将答案对象添加到答案数组中
					answers.push(answer);
				});

				// 在这里将 answers 提交给后端进行处理
				// 你可以使用 axios 或者其他方法将数据发送到后端

				// 输出答案数组，方便调试
				console.log(answers);


				const formData = {
					// id: this.id,
					template_code: this.questions[0].code,
					// resident_name: "微信用户",
					// idcardnum: '',
					options: answers,
					// id   survey_name
					template: this.template,
					// return_code: this.questions[0].return_code,

				};

				const followData = JSON.parse(JSON.stringify(formData));
				followData.options = JSON.stringify(followData.options);

				console.log(formData);

				// postSurvey(followData)
				// 	.then(res => {
				// 		console.log('登录2' + JSON.stringify(res));
				// 		// 在这里处理获取到的结果
				// 		if (res.status === 1) {
				// 			uni.showToast({
				// 				title: '提交成功',
				// 				icon: 'success',
				// 				duration: 2000
				// 			});
				// 		} else {
				// 			uni.showToast({
				// 				title: res.msg || '提交失败',
				// 				icon: 'none',
				// 				duration: 2000
				// 			});
				// 		}
				// 	})
				// 	.catch(error => {
				// 		console.error('请求出错：', error);
				// 		// 在这里处理错误情况
				// 	});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {}

	.topimg {
		width: 100%;
		height: auto;
	}

	.wap-content {
		background-image: url('../../static/bg2.png');
		background-size: 100% 100%;
		background: linear-gradient(to bottom, #9dceff, #52acfd);
		padding: 0 4.3% 50px 4.3%;

	}

	.wap-content-item {
		background-color: #fff;
		padding: 0 20px 50px 20px;
	}


	.question {
		margin-bottom: 20px;

		.question-title {
			padding: 10px 0;
		}
	}

	.star-rating {
		margin-top: 10px;


	}

	textarea {
		height: 100px;
		margin-top: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	/* 样式 */
	.option-button {
		background-color: #f2f6f8;
		border-radius: 20px;
		padding: 10px 20px;
		margin-bottom: 10px;
		cursor: pointer;
		display: flex;
		align-items: center;


	}

	.selected {
		background-color: #1e90f7;
		color: #ffffff;
		justify-content: space-between;
	}
</style>